<template>
  <div style="height:100%;width:100%;">
    <div class="codeCanvas" style="height:100%;width:100%;"></div>
  </div>
</template>

 <script>
export default {
  name: "basicIncome",
 props: {
   numberEchart: {
     type: Object,
     default: () => {
       return {};
     }
   }
 },
 watch:{
   numberEchart(val){
    this.getPie(val);
   }
 },
  methods: {
    getPie(val) {
      const that = this;
      var myChart = this.$echarts.init(document.querySelector(".codeCanvas"));
      let option = {
      tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            },
          formatter:"{b} {c}%",
          },

        grid: {
          left: "20px",
          right: "20px",
          bottom:'20px',
            top:'20px'

         },
        xAxis: {
          type: 'category',
          // boundaryGap: false,
          data: val.xAxis,
          // axisLabel: {
          //   interval:0,
          //   rotate:40 ,
          //   },
          },
        yAxis:
              {
                  type: 'value',
                  min: 0,
                  splitLine:{show: false},  //去除网格线
                  // max: maxData*2,
                  // // interval: 50,
                  axisLabel: {
                      formatter: '{value}%',
                      show:false
                  },
                  axisTick:{ //y轴刻度线
                      show:false
                  },
                  axisLine:{ //y轴
                      show:false
                  },
              },
        series:
         {
          type: "bar",
          name: 'DICT收入',
          data: val.yAxis,
          barWidth :20,
          itemStyle: {
                      normal: {
                          // 随机显示
                          //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                          // 定制显示（按顺序）
                          color: function(params) {
                            var c="";
                            var index = val.xAxis.indexOf("浙江");
                            if(params.dataIndex == index){
                                   c='#c00000'
                               }else{
                                   c='#0070c0'
                               }
                               return c;
                          },
                          label : {
                                  show: true,
                                  position: 'top',
                                  textStyle: {
                                     color: '#0070c0'
                                   },
                                    formatter:"{c}%",
                          },
                      },
                  },
        },
      };
      myChart.setOption(option);
    }
  },
};
 </script>

 <style>
 </style>
